const get_list_top = async () => {
    try {
        const res1 = await fetch(`https://m.youxiake.com/api/m/product/lines/status?pid=` + window.location.search.split('=')[1]);
        const data1 = await res1.json();
        const banner = document.querySelector('.banner');
        const Line__title = document.querySelector('.Line__title')
        const price_box = document.querySelector('.price_box')
        const ellipsis = document.querySelector('.ellipsis')
        const packageScroller__package_right = document.querySelector('.packageScroller__package_right')
        const ScrollX = document.querySelector('.ScrollX')
        const LineEnrolment2 = document.querySelector('.LineEnrolment2')
        const comment__head = document.querySelector('.comment__head')
        const comment__tags = document.querySelector('.comment__tags')
        const box__scroll = document.querySelector('.box__scroll')
        const Line__discuss = document.querySelector('.Line__discuss')
        const line__mall__main = document.querySelector('.line__mall__main')
        const detail__container = document.querySelector('.detail__container')
        const Customer__explain = document.querySelector('.Customer__explain')

        document.title = `${data1.data.Ptitle}`

        Line__title.innerHTML += `
            <div class="title_pname">${data1.data.Ptitle} </div>
            <div class="title_sname">${data1.data.Pdesc}</div>
        `
        price_box.innerHTML += `
            <div>
                <span>￥</span>
                <b>${data1.data.Price}</b>
                <span class="price_intro">起/成人</span>
            </div>
            <div>
                <span>￥</span>
                <b>${data1.data.Price}</b>
                <span class="price_intro">起/儿童</span>
            </div>
        `
        // 小图片
        const res2 = await fetch(`https://m.youxiake.com/api/m/product/detail?pid=` + window.location.search.split('=')[1] + `&spm=&oid=0`);
        const data2 = await res2.json();
        let imglist = '';
        data2.data.product.flash_pic.forEach((item, index) => {
            imglist += `
                    <div class="img_background" style="${index == 0 ? 'border: 1px solid #fff100;' : ''}">
                        <img class="pic_smail" src="${item}">
                    </div>
                `
        });
        //product_cate_type
        let product_cate_type = ''
        data2.data.product.product_cate_type.forEach(item => {
            product_cate_type += `
                ${item + ' · '}
            `
        })

        banner.innerHTML += `
            <div class="banner_back" onclick="back()"></div>
            <div class="banner_user" onclick="jump()"></div>
            <div class="banner__type">${product_cate_type}${data2.data.product.daysLabel}</div>
            <img class="pic_big" src=${data2.data.product.flash_pic[0]}>
            <div class="thumbnail_bg"></div>
        `
        // 大图片区域
        banner.innerHTML += `
            <div class="thumbnail">
                <div class="thumbnail_items">${imglist}</div>
                <div class="thumbnail_right">
                <div class="thumbnail_text">
                    <p> ${data2.data.relatedDiscover.subTitle} </p>
                    <p>${data2.data.relatedDiscover.title}</p>
                </div>
                <img src="https://m.youxiake.com/20250829115902/img/thumbnail_icon.d151c429.png" alt="">
                </div>
            </div>
        `;

        //主图片
        if (data2.data.product.flash_pic[0]) {
            banner.style.backgroundImage = `url('${data2.data.product.flash_pic[0]}')`;
        }

        // 选择团期
        data2.data.dateList.forEach((item, index) => {
            if (item.batchLabel) {
                ellipsis.style.backgroundColor = '#ffeaea'
            }
            ScrollX.innerHTML += `
                <div class="LinePackage__scroll__item">
                    <div>
                        <div class="ellipsis">${item.batchLabel}</div>
                        <div class="time">${item.endtime}</div>
                        <div class="week">${item.week}</div>
                        <div class="LinePackage__scroll__item_price">
                                ￥${item.price}
                        </div>
                    </div>
                    <div class="insure">
                            ${item.cornerTip}
                    </div>
                </div>
            `
        });
        //报名
        LineEnrolment2.innerHTML = `
            <div class="LineEnrolment__left">
                <img src="https://m.youxiake.com/20250829162859/img/face.ec732452.png" alt="">
                    ${data2.data.dateList[0].batchLimitDesc}
            </div>
            <div class="LineEnrolment__right">
                <img src="${data2.data.dateList[0].avatarList[0]}" alt="">
                <img src="${data2.data.dateList[0].avatarList[1]}" alt="">
                <img src="${data2.data.dateList[0].avatarList[2]}" alt="">
                <div class="LineEnrolment__avatars">${data2.data.dateList[0].memberCount}人已报名</div>
                <img class="LineEnrolment__avatars——jiantopu"
                    src="https://m.youxiake.com/20250829162859/img/img42.c68ead15.png" alt="">
            </div>
        `
        //评论tags
        comment__head.innerHTML = `
            <div class="comment__head__bold">用户评价(${data2.data.comment.pj_num})
                <div class="comment_user">${data2.data.comment.goodSubtitle}</div>
            </div>
            <div class="comment_all">
                <span>全部</span>
                <img src="https://m.youxiake.com/20250829162859/img/img42.c68ead15.png" alt="">
            </div>
        `
        data2.data.comment.tags.forEach(item => {
            comment__tags.innerHTML += `
                <div class="tags_item">${item.tname}</div>
            `
        })
        //用户评论
        data2.data.comment.lineContentList.forEach(item => {
            const commentId = `comment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
            box__scroll.innerHTML += `
                <div class="great__comment">
                    <div class="comment__left">
                        <div class="comment__avatar">
                            <img src="${item.avatar}" alt="">
                        </div>
                        <div class="comment__left_inner">
                            <div class="left__user">
                                ${item.username}
                                <span class="level__label">${item.yxkLevelLabel || ''}</span>
                            </div>
                            <div class="left__comment">
                                ${item.comment || '暂无评论内容'}
                            </div>
                        </div>
                    </div>
                    <div class="comment__right" id="${commentId}"></div>
                </div>
            `;

            const currentCommentRight = document.getElementById(commentId);
            if (currentCommentRight && item.img) {
                currentCommentRight.style.backgroundImage = `url("${item.img}")`;;
            } else if (currentCommentRight) {
                currentCommentRight.style.backgroundColor = '#f5f5f5';
            }
        });
        //咨询
        let discuss_inner = ''
        data2.data.discuss.commentList.forEach((item) => {
            discuss_inner += `
                <div class="discuss__box__item">
                    <img src="https://m.youxiake.com/20250829162859/img/img17.b5fcf354.png" alt="">
                    <div class="item_content">${item.content}</div>
                    <span class="item_num">${item.subNum == 0 ? '' : item.subNum + '个回答'}</span>
                </div>
            `
        })
        Line__discuss.innerHTML = `
            <div class="discuss__head">
                <div>${data2.data.discuss.num > 0 ? `咨询(${data2.data.discuss.num})` : '暂无咨询'}</div>
                <b>
                    去咨询
                    <img src="https://m.youxiake.com/20250829162859/img/img42.c68ead15.png" alt="">
                </b>
            </div>
            ${discuss_inner}
        `
        
        const res3 = await fetch(`https://m.youxiake.com/api/m/product/lines/detail?pid=` + window.location.search.split('=')[1] + `&did=` + data2.data.dailyPkgList[0].dailyPkgId + `&oid=0`);
        const data3 = await res3.json();
        // 选择套餐
        packageScroller__package_right.innerHTML += `
            <p>${data3.data.dailyList[0].pkgname}</p>
            <div class="packageScroller__package_right_intro">
                <div class="day">天数</div>
                <span class="day_span">${data3.data.days}</span>
                <div class="go">出发</div>
                <span class="go_span">${data3.data.jiesanPlace}</span>
            </div>
        `
        const thumbnailItems = document.querySelector('.thumbnail_items');
        thumbnailItems.addEventListener('click', get_img);

        //精选装备
        const res4 = await fetch("https://m.youxiake.com/api/m/product/lines/recommend/mall/v2?productId=54479&change=2&page=0");
        const data4 = await res4.json();
        data4.data.products.forEach(item => {
            line__mall__main.innerHTML += `
                <li>
                    <img src="${item.img}" alt="">
                    <div class="line__mall__item__tit">
                       ${item.name}
                    </div>
                    <div class="line__mall__item__botto">
                        <span class="line__mall__price">
                            ￥
                            <b class="line__mall__big">${item.price}</b>
                        </span>
                        <span class="line__mall__numb">已售${item.sale_num}</span>
                    </div>
                </li>
            `
        })
        //intro_img
        data3.data.featureImages.forEach(item => {
            detail__container.innerHTML += `
                <img class="intro_img" src="${item.imgUrl}" alt="">
            `
        })

        // star
        let star_img_true = ''
        let star_img_false = ''
        if (data2.data.productOutdoorLevel) {
            for (let i = 0; i < data2.data.productOutdoorLevel.solidStar; i++) {
                star_img_true += `
                <img src='https://m.youxiake.com/20250905172021/img/star38.b1fb074e.png'>
            `
            }
            for (let i = 0; i < data2.data.productOutdoorLevel.hollowStar; i++) {
                star_img_false += `
                <img src='https://m.youxiake.com/20250905172021/img/star40.97c4faad.png'>
            `
            }
            //Customer__explain
            // res3渲染字  res2 渲染星星    
            Customer__explain.innerHTML += `
                <div class="Customer__explain__wrap">
                    <div class="title">
                        <p>难度</p>
                        <img src="https://m.youxiake.com/20250905172021/img/difficulty.e58350ef.png" alt="">
                    </div>
                    <div class="Customer__LineStar">
                        ${star_img_true}${star_img_false}
                    </div>
                </div>
                <div class="Customer__explain__wrap">
                    <div class="title">
                        <p>徒步距离</p>
                    </div>
                    <span>${data3.data.totalHikeDistance}km</span>
                </div>
                <div class="Customer__explain__wrap">
                    <div class="title">
                        <p>海拔爬升</p>
                    </div>
                    <span>${data3.data.totalAltitudeUpdown}m</span>
                </div>
                <div class="Customer__explain__wrap">
                    <div class="title">
                        <p>适合年龄</p>
                    </div>
                    <span>${data3.data.ageRangeLabel}</span>
                </div>
            `
        } else {
            star_img_true = ''
            star_img_false = ''
            Customer__explain.style.display = 'none';
        }
    } catch (err) {
        console.log('请求错误：', err);
    }
};

// banner图片切换
function get_img(event) {
    const target = event?.target;
    if (!target || target.tagName !== 'IMG') return;
    const picSmail = document.querySelectorAll('.pic_smail');
    const picBig = document.querySelector('.pic_big');
    const banner = document.querySelector('.banner');

    picSmail.forEach(item => {
        item.parentNode.style.border = '1px solid transparent';
    });

    const src = target.getAttribute('src');
    picBig.setAttribute('src', src);
    banner.style.backgroundImage = `url('${src}')`;

    target.parentNode.style.border = '1px solid #fff100';
}

// 装备列表切换
let index = 1
function change_line(event) {
    const line__mall__main = document.querySelector('.line__mall__main')
    const refreshContainer = event.target.closest('.line__mall__refresh');
    index++
    if (index == 5) {
        index = 1
    }
    if (!refreshContainer) return;

    const rotateImg = refreshContainer.querySelector('img');
    if (!rotateImg) return;

    rotateImg.style.transition = "transform 1s ease-in-out";
    rotateImg.style.transform = "rotate(360deg)";

    setTimeout(() => {
        rotateImg.style.transform = "rotate(0deg)";
    }, 1000); // 时间与过渡时长一致（1s）

    fetch(`https://m.youxiake.com/api/m/product/lines/recommend/mall/v2?productId=54479&change=2&page=${index}`).then(res => res.json()).then(res1 => {
        console.log("接口返回数据：", res1);
        line__mall__main.innerHTML = ''
        res1.data.products.forEach(item => {
            line__mall__main.innerHTML += `
                <li>
                    <img src="${item.img}" alt="">
                    <div class="line__mall__item__tit">
                       ${item.name}
                    </div>
                    <div class="line__mall__item__botto">
                        <span class="line__mall__price">
                            ￥
                            <b class="line__mall__big">${item.price}</b>
                        </span>
                        <span class="line__mall__numb">已售${item.sale_num}</span>
                    </div>
                </li>
            `
        })
    }).catch(err => {
        console.error(err);
    });
}
get_list_top();
function back() {
    window.history.back()
}
function jump() {
    window.location.href = 'personal.html'
}


